<template>
    <div>
        <div class="searchInput">
            <div class="xia">
                <div class="kuang">
                    <div>
                        账号： <el-input placeholder="请输入账号"></el-input>&emsp;&emsp13;
                    </div>
                    <div>
                        访问模块： <el-input placeholder="请输入账号"></el-input>&emsp;&emsp13;
                    </div>
                    <div>
                        操作类型： <el-select style="width: 108px;" v-model="searchType" placeholder="请选择">
                                <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                        &emsp;&emsp13;状态： <el-select style="width: 108px;" v-model="searchState" placeholder="请选择">
                            <el-option
                            v-for="item in stateOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>&emsp;&emsp13;
                </div>
                <div>
                    <span class="demonstration">操作时间：</span>
                    <el-date-picker
                    v-model="searchDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                  
            </div>
            <div class="btns">
                <el-button class="chaxun">查询</el-button>
                <el-button class="reset">重置</el-button>
            </div>
        </div><br>
    </div>
    <div class="addBtn">
        <el-button class="newAdd" @click="delLog"><i class="el-icon-delete"> </i> 删除</el-button>
    </div>
        <!-- 数据 -->
        <el-table
            :header-cell-style="{background:'#e8efff',color:'#000000'}"
            :data="lockTableData"
            :loading="loading"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column prop="order" label="序号" width="60">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.order }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="account" label="账号">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.account }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="操作类型">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.type }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="module" label="访问模块">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.module }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="操作内容">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.content }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="ip" label="IP地址">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.ip }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="操作状态">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        <span v-if="scope.row.state == 0">成功</span>
                        <span v-if="scope.row.state == 1">失败</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="操作时间">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.create_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="编辑" width="300">
                <template v-slot="scope">
                    <div class="scope" style="color:#949BBE;">
                        <span class="detailBtn detail" @click="goDetail(scope.row.id)">日志详情</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Pagination />
        <!-- 添加/详情/编辑 -->
        <el-dialog center :close-on-click-modal="false" width="636px" top="12vh" :visible.sync="newVisible">
            <template slot="title">
                <div class="dialog_title">
                    日志详情
                </div>
            </template>
            <el-form label-position="right" label-width="120px" :model="gunInfoForm">
                <el-form-item prop="real_pay" label="账号：" >
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                        订单管理-充电订单
                    </span>
                </el-form-item>
                <el-form-item prop="cause" label="操作模块：">
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                        查看
                    </span>
                </el-form-item>
                <el-form-item prop="money" label="操作类型：">
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                        查看充电订单数据
                    </span>
                </el-form-item>
                <el-form-item prop="money" label="操作内容：">
                    <span style="color: #000000; font-size: 14px; font-weight: 400; line-height: 14px;">
                        查看充电订单数据
                    </span>
                </el-form-item>
                <el-form-item prop="money" label="请求参数：">
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                        ("'dataJson"" "orderld ":"535 " "changeTime ": "2019-10-23(" "protocolExplain "" ""protocolAttach ": ""）
                    </span>
                </el-form-item>
                <el-form-item prop="money" label="返回参数：">
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                        admin
                    </span>
                </el-form-item>
                <el-form-item prop="money" label="操作方法：">
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                        com.hyd.zcar.cms.controller.order.OrderChangeProtocolController.addOrderChangeProtoco
                    </span>
                </el-form-item>
                <el-form-item prop="money" label="请求URL：">
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                        /ordermanage/orderC!gangep/addOrderChangeProtocol
                    </span>
                </el-form-item>
                <el-form-item prop="money" label="请求IP：">
                    <span style="color: #000000; font-size: 14px; font-weight: 400;">
                        124.202.192.246
                    </span>
                </el-form-item>
            </el-form>
        </el-dialog>
        <SuccessTip :isAgreeShow="isAgreeShow" :text="Success_text"/>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
import SuccessTip from '@/components/SuccessTip.vue'
    export default {
        components:{
            Pagination,SuccessTip
        },
        data() {
            return {
                loading:true,
                disabled:false,
                searchType:'',
                searchState:'',
                searchDate:'',
                stateOption:[
                    {
                        value: null,
                        label: '请选择'
                    },
                    {
                        value: null,
                        label: '成功'
                    },
                    {
                        value: null,
                        label: '失败'
                    },
                ],
                typeOptions: [
                    {
                        value: null,
                        label: '请选择'
                    }, 
                    {
                        value: 0,
                        label: '查询'
                    }, 
                    {
                        value: 1,
                        label: '新增'
                    }, 
                    {
                        value: 2,
                        label: '修改'
                    }, 
                    {
                        value: 3,
                        label: '查看'
                    }, 
                    {
                        value: 4,
                        label: '删除'
                    }, 
                        ],
                    lockTableData: [
                    {
                        order: 1,
                        account: 'admin',
                        type: '查询',
                        module: '用户管理',
                        content:'查询符合条件的用户信息',
                        ip:'128.0.0.5',
                        state:0,
                        create_time:'2023.03.03 12:20:30',
                        id:1
                    },
                    {
                        order: 1,
                        account: 'admin',
                        type: '查询',
                        module: '用户管理',
                        content:'新增部门',
                        ip:'128.0.0.5',
                        state:1,
                        create_time:'2023.03.03 12:20:30',
                        id:1
                    },
                    {
                        order: 1,
                        account: 'admin',
                        type: '查询',
                        module: '用户管理',
                        content:'查看产研部部门详情',
                        ip:'128.0.0.5',
                        state:1,
                        create_time:'2023.03.03 12:20:30',
                        id:1
                    },
                    {
                        order: 1,
                        account: 'admin',
                        type: '查询',
                        module: '用户管理',
                        content:'删除产研部部门',
                        ip:'128.0.0.5',
                        state:0,
                        create_time:'2023.03.03 12:20:30',
                        id:1
                    },
                ],
                dialogTitle:'退款申请',
                confirmBtnText:"确认",
                newVisible:false,
                newDetailVisible:false,
                gunInfoForm:{}, //充电枪信息
                is_detail:false,
                isAgreeShow:false,
                alert_title:'提现申请',
                Success_text:'操作成功'
            }
        },
        methods: {
            submitGunForm(formName){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证完成
                        alert('submit!');
                        this.newVisible = false
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            delLog(){
                this.newVisible = true
            },
          
            goDetail(id){
                this.newVisible = true
            },
        },
        
    }
</script>

<style lang="less" scoped>
.searchInput{
    text-align: left;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666 !important;
}
.el-input{
    width: 280px;
    height: 35.98px;
    font-size: 11.97px;
    color: #666666;
    background: #F0F1F6;
}
.el-input__inner{
  background-color: #F0F1F6;  
}
.el-select{
    width: 280px;
    height: 35.98px;
}
.kuang{
    float: left;
}
.kuang>div{
    margin-top: 10px !important;
}
.el-button{
    background: transparent;
    border: none;
}
.chaxun{
    background: #165BFF;
    color: white;
}
.reset{
    background: #F0F1F6;
    color: #666666;
}
::v-deep .el-table th > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
.editBtn{
    display: inline-block;
    margin-right: 8px;
    color: #000000;
    cursor: pointer;
}
.detailBtn{
    margin-right: 8px;
    display: inline-block;
    color: #0926B6;
    cursor: pointer;
}
.deleteBtn{
    display: inline-block;
    color: #FA698D;
    cursor: pointer;
}
.confirmButtonClass{
    background: #165bff;
}
#dialog .el-dialog__header {
    padding: 20px 20px 0px;
    background: #165BFF;
    text-align: left;
    font-weight: bold;
}
#dialog .el-dialog__body{
    height: 188px;
}
.formCancel,.formConfirm{
    width: 140px;
    height: 44px;
    border-radius: 4px 4px 4px 4px;
    border: none;
    opacity: 1;
}
.formCancel{
    background: white;
    border: 1px solid #F0F1F6;
}
.formConfirm{
    margin-left: 24px;
    background: #165BFF;
}
.dialog-footer{
    margin-top: -50px;
    text-align: center;
}
.el-dialog .el-input{
    width: 423px;
}
.el-dialog .el-select{
    width: 423px;
}
.dialog_title{
    margin-top: 24px;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
}
.kuang>div{
    margin: 5px auto;
    display: inline-block;
}
.a .el-select{
    width: 108px;
}
.el-table{
    margin-top: 32px;
}
.xia{
    height: 36px;
}
.btns{
    margin-top: 10px;
    float: right;
}
.btm{
    margin-top: 14px;
    margin-bottom: 10px;
}
.beiZhu{
    transform: translate(-50px,0);
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999; 
}
.addBtn{
    text-align: left;
    margin-top: 24px;
}
.newAdd{
    margin-top: 10px;
    background: #165BFF;
    color: white;
    width: 92px;
    height: 36px;
}
.edit{
    color: #09D796;
}
.xiajia{
    color: #FFB240;
}
.detail{
    color: #0926B6;
    font-weight: 400;
    font-size: 14px;
}
.shang{
    color: #8500ED;
}
.del{
    color: #FA698D;
}
</style>
<style>
.el-range-input{
    background: #f0f1f6;
    font-size: 12px !important;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
</style>

<style>
.el-message-box__header{
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 16px;
}
.el-message-box{
    width: 360px !important;
    height: 188px !important;
    background:#FFFFFF;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
}
.el-message-box--center .el-message-box__content{
    margin-top: 10px;
}
.el-message-box__message{
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.el-message-box__btns{
    margin-top:38px ;
}
.el-button--default{
    width: 80px;
    height: 36px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
}
.el-button--primary{
    width: 80px;
    height: 36px;
    background:#165BFF !important;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #165BFF;
    opacity: 1;
}

.el-range-input{
    background: #f0f1f6;
    font-size: 12px !important;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}

.el-upload--picture-card{
    width: 75px;
    height: 75px;
    line-height: 82px;
    text-align: center;
}

</style>